

<section id="section_3" hidden>
  <div class="index">3</div>
  <h2>Personalize the model!</h2>

  <div id="hasMelody" hidden>
    <p>The MIDI file you uploaded had several instruments, so this is what we think the melody is. This is what we will be training on.</p>
    <div class="relative">
      <button id="btnPlayMelody" class="button-circle" aria-label="play">
        <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
        <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
      </button>
      <div class="visualizer-container cream">
        <svg id="vizMelody"></svg>
      </div>
    </div>
  </div>

  <p id="beforeTraining">We're ready to start training on the MIDI that you uploaded! If you think about MusicVAE as representing the
    space of all possible melodies as a giant sphere, we are now building a smaller sphere
    inside of it, which represents all the melodies that are musically in the same neighbourhood as <b>yours</b>. The more steps you
    train for, the better the results are. <br>
    When you're ready, <button class="button" id="btnTrain">start training!!</button> for <input id="trainingSteps" value="100" type="tel"> steps.
  </p>
  <p id="doneTraining" hidden><b>Training complete!</b><br>
    We've now added 4 new MidiMe sliders to Step 1: these super slliders
    control the features that make the random samples sound like <b>your</b> input. Go slide them around and see
    how the samples change!<br>
  </p>
  <div id="duringTraining" hidden>
    <p>Training step: <b id="trainingStep">0</b> / <span id="totalSteps">100</span></p>
    <p>To check how well we're training the model, we can track its error reconstructing your
      uploaded file. We're not looking for it to become exactly 0 -- just to go down and flatten out. </p>
    <svg id="errorGraph" width="300"></svg>
  </div>
</section>
